<template>
  <div class="custom-node-example">
    <h2>自定义节点示例</h2>
    <p class="description">使用插槽自定义节点样式和内容</p>
    
    <FlowGraph :nodes="nodes" :config="config">
      <!-- 完全自定义节点 -->
      <template #node="{ node, isSelected }">
        <div 
          :class="['custom-node', `type-${node.type}`, { selected: isSelected }]"
        >
          <div class="node-header" :style="{ background: getHeaderColor(node) }">
            <component :is="getIcon(node.type)" class="node-icon" />
            <span class="node-title">{{ node.title }}</span>
            <el-tag :type="getStatusType(node.status)" size="small">
              {{ getStatusText(node.status) }}
            </el-tag>
          </div>
          
          <div class="node-body">
            <div class="node-info">
              <div class="info-item">
                <span class="label">编号：</span>
                <span class="value">{{ node.data.code }}</span>
              </div>
              <div class="info-item">
                <span class="label">负责人：</span>
                <span class="value">{{ node.data.owner }}</span>
              </div>
              <div class="info-item">
                <span class="label">预计时长：</span>
                <span class="value">{{ node.data.duration }}</span>
              </div>
            </div>
            
            <div v-if="node.data.tags" class="node-tags">
              <el-tag
                v-for="tag in node.data.tags"
                :key="tag"
                size="small"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </div>
      </template>
    </FlowGraph>
    
    <div class="info-panel">
      <h3>自定义特性</h3>
      <ul>
        <li>✨ 自定义节点头部颜色</li>
        <li>🎨 根据节点类型显示不同图标</li>
        <li>📊 展示更多业务数据</li>
        <li>🏷️ 支持标签展示</li>
        <li>📈 节点状态可视化</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { Document, Setting, Monitor, CircleCheck } from '@element-plus/icons-vue';
import FlowGraph from '../FlowGraph.vue';

const config = {
  nodeWidth: 200,
  nodeHeight: 140,
  horizontalSpacing: 260,
  verticalSpacing: 160,
  showLegend: true,
};

const nodes = [
  {
    id: '1',
    title: '需求分析',
    type: 'document',
    status: 'completed',
    data: {
      code: 'TASK-001',
      owner: '张三',
      duration: '2天',
      tags: ['高优先级', '需求'],
    },
    nextNodeIds: '2',
  },
  {
    id: '2',
    title: '方案设计',
    type: 'design',
    status: 'in-progress',
    data: {
      code: 'TASK-002',
      owner: '李四',
      duration: '3天',
      tags: ['设计', '评审'],
    },
    preNodeIds: '1',
    nextNodeIds: '3,4',
  },
  {
    id: '3',
    title: '前端开发',
    type: 'development',
    status: 'pending',
    data: {
      code: 'TASK-003',
      owner: '王五',
      duration: '5天',
      tags: ['前端', 'Vue3'],
    },
    preNodeIds: '2',
    nextNodeIds: '5',
  },
  {
    id: '4',
    title: '后端开发',
    type: 'development',
    status: 'pending',
    data: {
      code: 'TASK-004',
      owner: '赵六',
      duration: '5天',
      tags: ['后端', 'Java'],
    },
    preNodeIds: '2',
    nextNodeIds: '5',
  },
  {
    id: '5',
    title: '集成测试',
    type: 'testing',
    status: 'pending',
    data: {
      code: 'TASK-005',
      owner: '孙七',
      duration: '2天',
      tags: ['测试', '集成'],
    },
    preNodeIds: '3,4',
  },
];

const getHeaderColor = (node) => {
  const colors = {
    document: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    design: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    development: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    testing: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
  };
  return colors[node.type] || colors.document;
};

const getIcon = (type) => {
  const icons = {
    document: Document,
    design: Setting,
    development: Monitor,
    testing: CircleCheck,
  };
  return icons[type] || Document;
};

const getStatusType = (status) => {
  const types = {
    completed: 'success',
    'in-progress': 'warning',
    pending: 'info',
  };
  return types[status] || 'info';
};

const getStatusText = (status) => {
  const texts = {
    completed: '已完成',
    'in-progress': '进行中',
    pending: '待开始',
  };
  return texts[status] || status;
};
</script>

<style scoped>
.custom-node-example {
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 8px;
}

.description {
  color: #666;
  margin-bottom: 20px;
}

/* 自定义节点样式 */
.custom-node {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.custom-node:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.custom-node.selected {
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
}

.node-header {
  padding: 10px 12px;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
}

.node-icon {
  font-size: 16px;
}

.node-title {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
}

.node-body {
  padding: 12px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item {
  display: flex;
  font-size: 12px;
}

.info-item .label {
  color: #666;
  min-width: 70px;
}

.info-item .value {
  color: #333;
  font-weight: 600;
}

.node-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

/* 信息面板 */
.info-panel {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.info-panel h3 {
  margin-top: 0;
  color: #333;
}

.info-panel ul {
  color: #666;
  line-height: 2;
  list-style: none;
  padding-left: 0;
}

.info-panel li {
  padding-left: 8px;
}
</style>

